<template>
  <el-row class="container">
    <el-row class="menu">
      <menuView ref="menuComp" @select-trees="selectTrees"/>
    </el-row>
    <el-row class="content">
      <el-row class="breadcrumb center-vertical" v-if="breadcrumbs.length>0">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>
            <a href="javascript:;" @click="toTopBreadcrumb">回到顶部</a>
          </el-breadcrumb-item>
          <el-breadcrumb-item v-for="(breadcrumb,index) in breadcrumbs" :key="index">
            <a href="javascript:;" @click="selectTrees(breadcrumb)">{{breadcrumb.data.title}}</a>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </el-row>
      <el-row class="top-header p-10 flex-row">
        <el-button type="primary" plain @click="add">
          <span class="iconfont iaiai-add f20 m-r-5"></span>添加
        </el-button>
      </el-row>
      <el-row class="flex-max pr">
        <el-table :data="tableData" height="100%" class="pa-fill">
          <el-table-column label="类型" width="70" fixed="left">
            <template #default="scope">
              <el-tag type="primary" effect="plain" v-if="scope.row.type==1">目录</el-tag>
              <el-tag type="success" effect="plain" v-if="scope.row.type==2">菜单</el-tag>
              <el-tag type="info" effect="plain" v-if="scope.row.type==3">功能</el-tag>
              <el-tag type="danger" effect="plain" v-if="scope.row.type==4">子页面</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="seq" label="顺序" width="60" fixed="left" />
          <el-table-column label="图标" width="60" fixed="left">
            <template #default="scope">
              <span v-if="scope.row.icon!=null && scope.row.icon.length>0"
                    class="iconfont"
                    :class="[scope.row.icon]"/>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" min-width="200" fixed="left" />
          <el-table-column prop="code" label="编码" min-width="200" />
          <el-table-column prop="remark" label="备注" min-width="200" />
          <el-table-column label="显示" width="100">
            <template #default="scope">
              <el-tag type="success" effect="dark" v-if="scope.row.show==1">显示</el-tag>
              <el-tag type="danger" v-if="scope.row.show==0">隐藏</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="缓存" width="100">
            <template #default="scope">
              <el-tag type="success" effect="dark" v-if="scope.row.cache==1">缓存</el-tag>
              <el-tag type="danger" v-if="scope.row.show==0">不缓存</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="url" label="url地址" min-width="300" />
          <el-table-column prop="filePath" label="文件地址" min-width="300" />
          <el-table-column label="创建时间" width="200">
            <template #default="scope">
              {{timestampToDateString(scope.row.createTime)}}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120" align="center">
            <template #default="scope">
              <el-row class="flex-row center-flex">
                <el-tooltip effect="dark" content="编辑" placement="bottom">
                  <el-button link type="primary" @click="edit(scope.row)">
                    <span class="iconfont iaiai-edit" />
                  </el-button>
                </el-tooltip>
                <el-divider direction="vertical" />
                <el-popconfirm title="是否要删除此岗位?" :hide-icon="true" @confirm="del(scope.row.id)">
                  <template #reference>
                    <el-row>
                      <el-tooltip effect="dark" content="删除" placement="bottom">
                        <el-button link type="danger">
                          <span class="iconfont iaiai-delete" />
                        </el-button>
                      </el-tooltip>
                    </el-row>
                  </template>
                </el-popconfirm>
              </el-row>
            </template>
          </el-table-column>

          <template #empty>
            <el-empty description="无数据" />
          </template>
        </el-table>
      </el-row>
    </el-row>

    <addMenu ref="addMenuComp" @onsuccess="addSuccess"/>
    <editMenu ref="editMenuComp" @onsuccess="editSuccess"/>
  </el-row>
</template>

<script lang="ts" setup>
import {inject, onMounted, ref} from "vue"
import {timestampToDateString} from '@/core/util/date_util'
import addMenu from './add.vue'
import editMenu from './edit.vue'
import menuView from './menu.vue'

const $api = inject('$api')
const $post = inject('$post')
const $toast = inject('$toast')
const tableData = ref([])
const search = ref("")
const loading = ref(true)

// eslint-disable-next-line
const addMenuComp = ref(null)
// eslint-disable-next-line
const editMenuComp = ref(null)
// eslint-disable-next-line
const menuComp = ref(null)
const breadcrumbs = ref([])  //面包屑

onMounted(()=>{
  getData()
})

function getData(){
  var id = null
  if(breadcrumbs.value!=null && breadcrumbs.value.length>0){
    id = breadcrumbs.value[breadcrumbs.value.length-1].data.id
  }
  $post($api.menuList,{id:id}).then((res:any)=>{
    tableData.value = res.data.result.menus
  })
}

function add(){
  var node = null
  if(breadcrumbs.value!=null && breadcrumbs.value.length>0){
    node = breadcrumbs.value[breadcrumbs.value.length-1]
  }
  addMenuComp.value.showComp(node)
}

function edit(menu:any){
  editMenuComp.value.showComp(menu.id)
}

//回到顶部
function toTopBreadcrumb(){
  breadcrumbs.value = []
  getData()
}

function selectTrees(trees:any){
  breadcrumbs.value = []
  breadcrumbs.value.push(trees)

  if(trees.parent!=null) {
    getParentTree(breadcrumbs,trees.parent)
  }
  getData()
}

//获取上层
function getParentTree(_breadcrumbs,tree){
  if(tree.parent==null)return

  _breadcrumbs.value.splice(0,0,tree)
  getParentTree(_breadcrumbs,tree.parent)
}

//添加成功
function addSuccess(){
  getData()

  if(menuComp.value!=null) {
    menuComp.value.refData()
  }
}

//保存成功
function editSuccess(){
  getData()

  if(menuComp.value!=null) {
    menuComp.value.refData()
  }
}

function del(id:any){
  $post($api.menuDel,{id:id}).then((res:any)=>{
    getData()

    if(menuComp.value!=null) {
      menuComp.value.refData()
    }
  })
}
</script>

<style lang="scss" scoped>
.container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;

  .menu{
    width: 300px;
  }

  .content{
    flex: 1;
    display: flex;
    flex-direction: column;

    .breadcrumb{
      height: 45px;
      background-color: white;
      padding: 0 20px;
      border-bottom: 1px #efefef solid;
    }

    .top-header{
      background-color: white;
      border-bottom: 1px #efefef solid;

      .search{
        float: right;
        text-align: right;
        justify-content: flex-end;
      }
    }

    .content-page{
      height: 50px;
      background-color: white;
    }
  }
}
</style>
